import React, { Component, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { TextArea, ImageUploader, List, Button, Toast } from 'antd-mobile'
import './Feedback.scss'
function Feedback() {
    const navigate = useNavigate()
    const [value, setValue] = useState('')
    const [show, setshow] = useState(false)
    const [fileList, setFileList] = useState([{ url: '' }])
    const [list, setlist] = useState([
        {
            title: '功能建议',
            checked: false
        },
        {
            title: '程序BUG',
            checked: false
        },
        {
            title: '书记相关',
            checked: false
        },
        {
            title: '其它',
            checked: false
        }
    ])
    function mockUpload(file) {
        return {
            url: URL.createObjectURL(file),
        }
    }
    function handle(val, index) {
        list[index].checked = val
        setlist([...list])
    }
    function butn() {
        Toast.show({
            icon: 'success',
            content: '反馈成功',
        })
        setValue('')
    }
    return (
        <div className='Feedback'>
            <div className="hfeedback">
                <i className='iconfont icon-fanhui' onClick={() => { navigate('/home/my') }} />
                <h3>意见反馈</h3>
                <p></p>
            </div>
            <div className='description'>
                <h3>问题描述</h3>
                <TextArea
                    placeholder='输入你的问题'
                    value={value}
                    onChange={val => {
                        setValue(val);
                    }}
                    onFocus={() => { setshow(true) }}
                    onBlur={() => { setshow(false) }}
                    rows={4}
                    style={show ? { 'border': '1px solid rgb(0, 170, 255)', '--font-size': '14px' } : { '--font-size': '14px' }}
                />

            </div>
            <div className="screenshot">
                <h3>上传问题截图</h3>
                <div className="img">
                    <ImageUploader
                        value={fileList}
                        onChange={setFileList}
                        upload={mockUpload}
                    />
                </div>
            </div>
            <div className="feedback">
                <h3>反馈类型</h3>
                <div className='feed'>
                    <List
                        style={{ '--font-size': '15px' }}
                    >
                        {
                            list.map((item, index) => {
                                return (
                                    <List.Item key={index}>
                                        <input type="checkbox" checked={item.checked} onChange={(e) => { handle(e.target.checked, index) }} />
                                        <span style={{ marginLeft: '3px' }}>{item.title}</span>
                                    </List.Item>
                                )
                            })
                        }
                    </List>
                </div>
            </div>
            <div className="btn">
                {value.length == 0 ?
                    <Button block style={{ backgroundColor: 'gray', color: 'white' }} disabled size='middle'>
                        提交
                    </Button> :
                    <Button block onClick={() => { butn() }} color='success' size='middle'>
                        提交
                    </Button>}

            </div>
        </div>
    );
}


export default Feedback;
